<style lang="less" scoped>
    .figure-box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f0f0f0;
        .figure-box_info{
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
        }
        .figure-box_btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #7A1634;
            text-align: center;
            display: block;
            border-radius: none;
            
        }
        .fig-detail{
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 10px;
            box-sizing: border-box;
            background: #fff;
            .fig-detail_memo{
                width: 100%;
                height: 50px;
                line-height: 50px;
                display: flex;
                border-bottom: 1px solid #e5e5e5;
                .icon-touxiang{
                    color: #7A1634;
                    margin-right: 10px;
                    margin-top: 2px
                    
                }
                .text-dit{
                    letter-spacing: 3px
                }
                .memo-box{
                     flex: 1;   
                     padding-top: 8px;
                     input{
                         width: 100px;
                         display: block;
                         line-height: 60px;
                         height: 35px;
                         text-indent: 10px;
                         border-bottom: 1px solid #e5e5e5
                     }
                }
            }
            .fig-detail_body{
                flex: 1;
                display: flex;
                flex-direction: column;
                li{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                    position: relative;
                    padding-left: 15px;
                    padding-top: 5px;
                    box-sizing: border-box;
                    .drage{
                        width: 6px;
                        height: 6px;
                        background: #7A1634;
                        position: absolute;
                        left: 0px;
                        top: 60%;
                        margin-top: -3px;
                        border-radius: 500px
                    }
                    .body-size{
                        flex: 1;
                        display: flex;
                        position: relative;
                        justify-content: flex-end;
                        >input{
                         width: 60px;
                         display: block;
                         height: 55px;
                         text-indent: 10px;
                        }
                        .slg{
                            width: 60px;
                            height: 2px;
                            background: #e5e5e5;
                            bottom: 10px;
                            position: absolute;
                            right: 0px;
                        }
                        .m-l{margin-left: 10px}
                        picker{
                            width: 100%;
                           
                        }
                    }
                }
            }
        }
        .text-right{
            text-align: right;
        }
        .line{
            line-height: 47px;
            display: inline-block;
        }
    }
</style>
<template>
    <div class="figure-box">
        <div class="figure-box_info">
            <div class="fig-detail" >
                <div class="fig-detail_memo">
                    <span class="iconfont icon-touxiang text-16"/>
                    <span class="text-16 text-dit" v-if="showEidt">备注名：</span>
                    <span v-else >{{memo}}</span>
                    <div class="memo-box">
                        <input type="text" v-model="memo" v-if="showEidt"/>
                        
                    </div>
                </div>
                <ul class="fig-detail_body">
                    <li>
                        <span class="drage"></span>
                        <span class="text-14">身高</span>
                        <div class="body-size">
                            <input type="number" v-if="showEidt" v-model="height" @input="setInfo(1)"/>
                            
                            <i class="slg" v-if="showEidt"></i>
                        </div>
                        <span v-if="!showEidt" class="line">{{height}}</span>
                        <span class="text-14">cm</span>
                    </li>
                    <li>
                        <span class="drage"></span>
                        <span class="text-14">体重</span>
                        <div class="body-size">
                            <input type="number" v-model="weight" @input="setInfo(2)" v-if="showEidt"/>
                            <i class="slg" v-if="showEidt"></i>
                        </div>
                         <span v-if="!showEidt"  class="line">{{weight}}</span>
                        <span class="text-14">kg</span>
                    </li>
                    <li>
                        <span class="drage"></span>
                        <span class="text-14">年龄</span>
                        <div class="body-size">
                            <input type="number" v-model="age" @input="setInfo(3)" v-if="showEidt"/>
                            <i class="slg" v-if="showEidt"></i>
                        </div>
                        <span v-if="!showEidt">{{age}}</span>
                    </li>
                    <li>
                        <span class="drage"></span>
                        <span class="text-14">衣码</span>
                        <div class="body-size">
                            <span></span>
                               <div style="width:100%;flex:1">
                                   <picker v-if="showEidt" style="width:100%; text-align: right" @change="bindPickerChange" :value="index" :range="array">
                                        <div class="picker">
                                            {{array[index]}}
                                        </div>
                                    </picker>
                                    <div v-else class="text-right">{{array[index]}}</div>
                               </div>
                                <i class="m-l" v-if="showEidt">>></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <span class="figure-box_btn text-white text-16" @click="showUserInfo">{{btnName}}</span>
    </div>
</template>
<script>
export default {
    'title':'尺码信息',
    data(){
        return{
            index: 0,
            memo: 'yang',
            weight: 10,
            height: 10,
            age: 20,
            btnName:'添加',
            showEidt: false,
            array: ['LL', 'MM', 'SS'],
        }
    },
    methods: {
        showUserInfo(){
            this.showEidt = !this.showEidt
            this.btnName = this.showEidt ? '保存':'添加'
        },
        bindPickerChange: function(e) {
            this.index = e.mp.detail.value
            
        },
        
        setInfo(num){
            console.log(num)
            switch(num) {
                case 1:
                    this.height = this.height.replace(/[^\d]/g,'')
                    break;
                case 2:
                    this.weight = this.weight.replace(/[^\d]/g,'')
                    break;
                case 3:
                    this.age = this.age.replace(/[^\d]/g,'')
                    break;
            }
        }  
    }
}
</script>

